<template> 
    <div style="padding:25px;">
        <el-form :model="pmsSkuIn" :rules="rules" ref="PmsSkuInFrom" label-width="150px">
            <el-row>
                <el-col :span="8">
                    <el-form-item
                            label="进货单号"
                            prop="innum">
                        <el-input v-model="pmsSkuInZong.innum"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                            label="供应商"
                            prop="supplierId">
                          <el-select v-model="pmsSkuInZong.supplierId" placeholder="请选择">
                            <el-option
                            v-for="item in supplierList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                            label="门店"
                            prop="storeId">
                         <el-select v-model="pmsSkuInZong.storeId" placeholder="请选择">
                            <el-option
                            v-for="item in storeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="margin-bottom:25px;">
                <el-col :span="24">
                      <el-table ref="pmsSkuInTable"
                      :data="pmsSkuInZong.pmsSkuInList"
                      show-summary
                      :summary-method="getSummaries"
                      style="width: 100%"
                      @selection-change="handleSelectionChange"
                      border>
                        <el-table-column type="selection" width="60" align="center"></el-table-column>
                        <el-table-column label="操作" width="160"  align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-document-add" title="新增" style="font-size:18px;" @click="handleNew(scope.$index, scope.row)"></i>
                                <i class="el-icon-edit-outline" title="编辑" style="font-size:18px;" @click="handleEdit(scope.$index, scope.row)"></i>
                                <i class="el-icon-circle-check" title="保存" style="font-size:18px;"  @click="handleSave(scope.$index, scope.row)"></i>
                                <i class="el-icon-document-delete" title="删除" style="font-size:18px;" @click="handleDelete(scope.$index, scope.row)"></i>
                            </template>
                        </el-table-column>
                        <el-table-column prop="productSn" width="120" 
                                        label="国标码">
                            <template slot-scope="scope">
                                <el-input size="small" @blur="getProduct(scope.$index, scope.row)" @keyup.enter.native="getProduct(scope.$index, scope.row)" v-if="scope.row.editing" v-model="scope.row.productSn" />
                                <span v-if="!scope.row.editing" >{{scope.row.productSn }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="productName" width="120" 
                                        label="商品名称">
                            <template slot-scope="scope">
                                <el-input size="small"  v-if="scope.row.editing" v-model="scope.row.productName" />
                                <span v-if="!scope.row.editing" >{{scope.row.productName }}</span>
                            </template>
                        </el-table-column>


                        <el-table-column prop="shopProductCode"
                                        label="自编码">
                            <template slot-scope="scope">
                                 <el-input size="small"  v-if="scope.row.editing" v-model="scope.row.shopProductCode" />
                                <span v-if="!scope.row.editing" >{{scope.row.shopProductCode }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="productHelpCode"
                                        label="自助记码">
                            <template slot-scope="scope">
                                  <el-input size="small"  v-if="scope.row.editing" v-model="scope.row.productHelpCode" />
                                <span v-if="!scope.row.editing" >{{scope.row.productHelpCode }}</span>
                            </template>
                        </el-table-column>

                    
                            
                        <el-table-column prop="productCategoryName"
                                        label="商品类别">
                            <template slot-scope="scope">
                                {{scope.row.productCategoryName }}
                            </template>
                        </el-table-column>

     
                        <el-table-column prop="price" width="200" 
                                        label="进价">
                            <template slot-scope="scope">
                                 <el-input-number  size="small" :precision="2"  v-if="scope.row.editing" v-model="scope.row.price" ></el-input-number>
                                <span v-if="!scope.row.editing" >{{scope.row.price }}</span>
                            </template>
                            
                        </el-table-column>

     
                        <el-table-column prop="stockIn" width="200" 
                                        label="数量">
                            <template slot-scope="scope">
                                 <el-input-number   size="small"  v-if="scope.row.editing" v-model="scope.row.stockIn" ></el-input-number>
                                <span v-if="!scope.row.editing" >{{scope.row.stockIn }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stockIn" width="100" 
                                        label="合计">
                            <template slot-scope="scope">
                                {{scope.row.price*scope.row.stockIn }}
                            </template>
                        </el-table-column>

                        <el-table-column prop="status"
                                        label="审核状态">
                            <template slot-scope="scope">
                                {{scope.row.status}}
                            </template>
                        </el-table-column>
                                    
                    
                    </el-table>


                    
                </el-col>
            </el-row>
                  <!--
                        <el-form-item
                            label="商品名称"
                            prop="productName">
                        <el-input v-model="pmsSkuIn.productName" :readonly="true"  style="width: 370px;"/>
                    </el-form-item>

                    <el-form-item
                            label="商品分类"
                            prop="productCategoryName">
                             <el-input v-model="pmsSkuIn.productCategoryName" :readonly="true" style="width: 370px;"/>
                                    <el-cascader
                                change-on-select    
                                v-model="selectProductCateValue"
                                :options="productCateOptions">
                                </el-cascader>
                    </el-form-item>


                    <el-form-item
                            label="商品进价"
                            prop="price">
                        <el-input v-model="pmsSkuIn.price" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="商品售价"
                            prop="originalPrice">
                        <el-input v-model="pmsSkuIn.originalPrice" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="入库数量"
                            prop="stockIn">
                        <el-input v-model="pmsSkuIn.stockIn" style="width: 370px;"/>
                    </el-form-item>

            
                   -->
               <el-row>
                <el-col :span="24" style="text-align:right;">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('PmsSkuInFrom')">保存</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
           
        </el-form>
    </div>
</template>
<script>
    import {createPmsSkuIn,createPmsSkuIns, getPmsSkuIn, updatePmsSkuIn,updateByInnum,findByInnum,getPmsSkuInZong} from '@/api/prm/pmsSkuIn'
    import {fetchList as shopSupplierList} from '@/api/psm/shopSupplier'
    import {fetchList as shopStoreList} from '@/api/mer/shopStore'
    import {getPmsProductBySn} from '@/api/product'
     import {fetchListWithChildren} from '@/api/productCate'
    import SingleUpload from '@/components/Upload/singleUpload'

    const defaultPmsSkuIn = {
            productId:null,
            productName:null,
            productCategoryId:null,
            productCategoryName:null,
            price:null,
            stockIn:null,
            productSn:null,
            productHelpCode:null,
            shopProductCode:null,
            editing:true,
            status:null
    };
     const defaultPmsSkuInZong = {
        innum: null,
        supplierId: null,
        supplierName:null,
        storeId: null,
        storeName: null,
        pmsSkuInList:[
           Object.assign({},defaultPmsSkuIn)
        ]
    };
    export default {
        name: 'PmsSkuInDetail',
        components: {SingleUpload},
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
            supplierList:[],
            multipleSelection:[],
            storeList:[],
            selectProductCateValue: [],
             productCateOptions: [],
            productParam:{},
            pmsSkuInZong:  Object.assign({},defaultPmsSkuInZong),
            pmsSkuIn: Object.assign({}, defaultPmsSkuIn),
            rules: {
                name: [
                    {required: true, message: '请输入品牌名称', trigger: 'blur'},
                    {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                ],
                    logo
            :
                [
                    {required: true, message: '请输入品牌logo', trigger: 'blur'}
                ],
                    sort
            :
                [
                    {type: 'number', message: '排序必须为数字'}
                ],
            }
        }
        },
        watch:{
            selectProductCateValue: function (newValue) {
                console.log(newValue)
                if (newValue != null) {
                this.value.productCategoryId = newValue[newValue.length-1 >0?newValue.length-1:0];
                this.value.productCategoryName= this.getCateNameById(this.value.productCategoryId);
                } else {
                this.value.productCategoryId = null;
                this.value.productCategoryName=null;
                }
            }
        },
        created() {
           
            if (this.isEdit) {
                getPmsSkuInZong(this.$route.query.id).then(response => {
                    this.pmsSkuInZong = response.data;
                    findByInnum(this.pmsSkuInZong.innum).then(response1 => {
                        this.pmsSkuInZong.pmsSkuInList = response1.data;
                    });
                });
                
            } else {
                this.pmsSkuInZong = Object.assign({},defaultPmsSkuInZong);
            }
            this.getSupplierList()
            this.getShopStoreList()

        },
        methods: {
            getSummaries(param){
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[0] = '合计';
                        return;
                    }
                    else if(index===8){
                        const values = data.map(item => Number(item.stockIn));
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                                }, 0);
                        }
                    }
                    else if(index===9){
                        const values = data.map(item => Number(item.stockIn)*Number(item.price));
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                        }
                    }else{
                        sums[index] = '';
                        return;
                    }
                    });

                return sums;
            },
            getSupplierList(){
                shopSupplierList({ pageNum: 1,pageSize: 100}).then(response => {
                    this.supplierList = response.data.records;
                })
            },
            getShopStoreList(){
                 shopStoreList({ pageNum: 1,pageSize: 100}).then(response => {
                    this.storeList = response.data.records;
                })
            },
           
            getProduct(index,row){
                if(row.productSn&&row.productSn.trim()!=""){
                    getPmsProductBySn(row.productSn).then(response => {
                        if(response.code == 200)
                            {
                            if(response.data&&response.data.length>0)
                               {
                                   row.productName=response.data[0].name
                                   row.productId=response.data[0].id
                                   row.productHelpCode=response.data[0].productHelpCode
                                   row.shopProductCode=response.data[0].shopProductCode
                                   row.productCategoryId=response.data[0].productCategoryId
                                   row.productCategoryName=response.data[0].productCategoryName
                               }
                            }
                        else
                            {
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }

                    })
                }
            },
           
            handleSelectionChange(){
                  this.multipleSelection = val;
            },
            handleNew(index,row){
                this.pmsSkuInZong.pmsSkuInList.splice(index+1,0,Object.assign({},defaultPmsSkuIn));
            },
            handleEdit(index,row){
                this.pmsSkuInZong.pmsSkuInList[index].editing = true
            },
            handleSave(index,row){
                this.pmsSkuInZong.pmsSkuInList[index].editing = false
            },
            handleAudit(index,row){
                this.pmsSkuInZong.pmsSkuInList[index].editing = false
            },
            handleDelete(index,row){
                this.pmsSkuInZong.pmsSkuInList.splice(index,1);
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        this.$confirm('是否提交数据', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            if(this.isEdit
                    )
                        {
                            updateByInnum(this.pmsSkuInZong).then(response => {
                                if(response.code == 200
                        )
                            {
                                this.$refs[formName].resetFields();
                                this.$message({
                                    message: '修改成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.$router.back();
                            }
                        else
                            {
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }

                        })
                            ;
                        }
                    else
                        {
                            createPmsSkuIns(this.pmsSkuInZong).then(response => {
                                if(response.code == 200
                        )
                            {
                                this.$refs[formName].resetFields();
                                this.pmsSkuIn = Object.assign({},
                            defaultPmsSkuIn)
                                ;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.$router.back();
                            }
                        else
                            {
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }

                        })
                            ;
                        }
                    })
                        ;

                    } else {
                        this.$message({
                            message: '验证失败',
                            type: 'error',
                            duration: 1000
                        });
                return false;
            }
            })
                ;
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.pmsSkuIn = Object.assign({},
            defaultPmsSkuIn)
                ;
            }
        }
    }
</script>
<style>
    
</style>


